import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { RooItemWrapper } from './style'
import { Rate } from 'antd'

const RoomItem = memo((props) => {
  const { data } = props
  return (
    <RooItemWrapper verify_color={data.verify_info.text_color || '#39576a'}>
      <div className='room-item__inner'>
        <div className='room-item-cover'>
          <img src={data.picture_url} alt="" />
        </div>
        <div className='room-item-meta'>
          {data.verify_info.messages.join(' · ')}
        </div>
        <div className='room-item-name'>{data.name}</div>
        <div className='room-item-price'>￥{data.price}/晚</div>
        <div className="room-item-bottom">
          <Rate
            disabled
            defaultValue={data.star_rating ?? 5}
            allowHalf
            style={
              { fontSize: '14px', color: '#00848a' }
            } />
          <span className='room-item-count'>{data?.reviews_count}</span>
          {
            data?.bottom_info && <span className='room-item-extra'>·{data?.bottom_info?.content}</span>
          }
        </div>
      </div>
    </RooItemWrapper>
  )
})

RoomItem.propTypes = {
  data: PropTypes.object
}

export default RoomItem